<template>
  <view v-if="goodsDetail" class="detail-comtainer">
    <scroll-view scroll-y class="introduceList-container">
      <!-- 顶部banner 轮播图 -->
      <DeSwiper :banner-data="goodsDetail?.imgList" />
      <view class="price-name">
        <view class="price">{{ goodsDetail?.min_max_sale_price_ }} <view class="line-through-price">{{
          goodsDetail?.min_max_market_price_ }}</view>
        </view>
        <view class="name">{{ goodsDetail?.name_ }}</view>
        <view class="selling_point_">{{ goodsDetail?.selling_point_ }}</view>
      </view>

      <view class="spec-container">
        <view class="spec-num">共{{ goodsDetail?.productList.length }}种规格</view>
        <view class="spec-txt" @tap="checkSpec">选择规格 <view class="icon-right"></view>
        </view>
      </view>
      <!-- 图文详情 -->
      <view v-for="item in introduceList" :key="item">
        <image :src="item" mode="widthFix" />
      </view>
    </scroll-view>

    <view class="goods-carts" :style="{ paddingBottom: $safeArea.safeAreaBottom + 'px' }">
      <uni-goods-nav :options="options" fill :button-group="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
    </view>
  </view>

  <DetailSkeleton v-else />

  <view class="back-home-container" :style="{ top: top + 'px', left: 12 + 'px', height: height + 'px' }">
    <uni-icons type="left" size="24" @tap="goBack"></uni-icons>
    <navigator url="/pages/index/index" open-type="switchTab" hover-class="navigator-hover">
      <uni-icons type="home" size="24"></uni-icons>
    </navigator>
  </view>

  <PinSkuPanel ref="skuPanel" />
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue"
import type { goodsSpuData, } from '@/types/goods';
import Apis from "@/services/modules/goods"
import CartApis from "@/services/modules/cart"

import DeSwiper from "./compontents/DeSwiper.vue";
import DetailSkeleton from "./compontents/DetailSkeleton.vue";
import type { PinSkuPanelInstance } from "@/types/component";

// 获取胶囊
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
const { top, height } = menuButtonInfo;

const goodsDetail = ref<goodsSpuData>()
const introduceList = ref<string[]>()

const query = defineProps<{
  id: string
}>()

const options = ref([{
  icon: 'star',
  text: '收藏'
}, {
  icon: 'cart',
  text: '购物车',
  info: 2
}])

const buttonGroup = [{
  text: '加入购物车',
  backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
  color: '#fff'
},
{
  text: '立即购买',
  backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
  color: '#fff'
}]

onMounted(() => {
  // 获取详情数据
  if (query.id) {
    getGoodsDetailData()
  }

  // 获取购物车数量
  getCartNumData()
})

const getCartNumData = async () => {
  const { data } = await CartApis.getCartNumber()
  options.value[1].info = data
}

const getGoodsDetailData = async () => {
  const { data } = await Apis.getSpuGoodsDetailApi(query.id)
  renderData(data)
}

const skuPanel = ref<PinSkuPanelInstance>()

const checkSpec = async () => {
  await skuPanel.value?.getData(`${goodsDetail.value!.id_}`)
}

const renderData = (data: goodsSpuData) => {
  goodsDetail.value = data
  introduceList.value = data.introduce_ ? JSON.parse(data.introduce_) : []
  options.value[0].icon = data.is_favorite_ ? "star-filled" : "star"
}

const buttonClick = async (e: UniHelper.UniGoodsNavOnButtonClickEvent) => {
  await skuPanel.value?.getData(`${goodsDetail.value!.id_}`, e.index)
}

const onClick = async (e: UniHelper.UniGoodsNavOnClickEvent) => {

  // 收藏
  if (e.index === 0) {
    const params = {
      company_id_: goodsDetail.value!.company_id_,
      goods_id_: goodsDetail.value!.id_
    }
    const { data } = goodsDetail.value!.is_favorite_ ? await Apis.delGoodsFavorite(params) : await Apis.addGoodsFavorite(params)
    goodsDetail.value!.is_favorite_ = data ? true : false
    options.value[e.index].icon = data ? "star-filled" : "star"
  }

  // 购物车
  if (e.index === 1) {
    uni.switchTab({ url: '/pages/cart/cart' })
  }
}

const goBack = () => {
  uni.navigateBack()
}

</script>

<style lang="scss">
page {
  background: #f7f7f7;
}

.detail-comtainer {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .price-name {
    background: #fff;
    margin: 12px 0;
    font-weight: bold;
    padding: 12px;
    font-size: 14px;

    .price {
      font-size: 16px;
      color: red;
      display: flex;

      .line-through-price {
        text-decoration: line-through;
        font-weight: normal;
        margin-left: 12px;
        color: #999;
      }
    }

    .name {
      font-weight: bold;
      margin: 6px 0;
    }


    .selling_point_ {
      color: #999;
      font-size: 12px;
    }
  }

  .spec-container {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    margin-bottom: 12px;
    font-size: 13px;
    background: #fff;

    .spec-txt {
      display: flex;
      flex: 1;
      justify-content: space-between;
      align-items: center;
      margin-left: 42px;
      color: #999;
    }
  }

  .introduceList-container {
    flex: 1;
    overflow: hidden;
  }
}

.back-home-container {
  position: fixed;
  width: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border: 1px solid #c8c7cc;
  border-radius: 16px;
  padding: 0 10px 0 6px;
}

:deep(.uni-tab__cart-button-left) {
  margin: 0 20px;
}
</style>

